<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="用户名">
                <a-input v-model="queryParam.nickname" placeholder />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="用户UUID">
                <a-input v-model="queryParam.uuid" placeholder />
              </a-form-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="8" :sm="24">
                <a-form-item label="手机号">
                  <a-input v-model="queryParam.mobile" placeholder />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="用户角色">
                  <a-select v-model="queryParam.group" placeholder="请选择" default-value="0">
                    <a-select-option value="0">管理员</a-select-option>
                    <a-select-option value="1">运维</a-select-option>
                    <a-select-option value="2">会员</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="用户状态">
                  <a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
                    <a-select-option value="0">全部</a-select-option>
                    <a-select-option value="1">正常</a-select-option>
                    <a-select-option value="2">冻结</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="4" :sm="24">
                <a-form-item label="是否绑定微信">
                  <a-select v-model="queryParam.bind_wechat" placeholder="请选择" default-value="0">
                    <a-select-option value="0">是</a-select-option>
                    <a-select-option value="1">否</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="4" :sm="24">
                <a-form-item v-model="queryParam.bind_realy" label="是否实名认证">
                  <a-select placeholder="请选择" default-value="0">
                    <a-select-option value="0">是</a-select-option>
                    <a-select-option value="1">否</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </template>
            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span
                class="table-page-search-submitButtons"
                :style="advanced && { float: 'right', overflow: 'hidden' } || {} "
              >
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <div class="table-operator" v-show="selectedRowKeys.length>0">
        <a-button style="margin-left: 8px">
          {{ $t('action.disable') }}
          <a-icon type="lock" />
        </a-button>
      </div>

      <s-table
        ref="table"
        size="default"
        :rowKey="(record) => record.uuid"
        :columns="columns"
        :data="loadData"
        :alert="true"
        :rowSelection="{selectedRowKey:selectedRowKeys,onChange:onSelectChange}"
        :showPagination="false"
      >
        <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
        <span slot="avatar" slot-scope="text">
          <a-avatar :size="32" :src="text"></a-avatar>
        </span>
        <span slot="status" slot-scope="text">
          <a-badge :status="text | statusTypeFilter" :text="text | statusText" />
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a style="color:rgba(255,0,0,.9)" @click="handleSub(record)">禁用</a>
          </template>
        </span>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
// import moment from 'moment'
import { STable, Ellipsis } from '@/components'
import { memberSearch } from '@/api/member'

const columns = [
  {
    title: '#',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: 'UUID',
    dataIndex: 'uuid'
  },
  {
    title: '用户名',
    dataIndex: 'nickname'
  },
  {
    title: '头像',
    dataIndex: 'avatar',
    scopedSlots: { customRender: 'avatar' }
  },
  {
    title: '主题数',
    dataIndex: 'topic_count'
  },
  {
    title: '用户组',
    dataIndex: 'group.name'
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '上次登陆时间',
    dataIndex: 'last_login_time',
    sorter: true
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]

const statusMap = {
  0: {
    status: 'error',
    text: '冻结'
  },
  1: {
    status: 'success',
    text: '正常'
  }
}

export default {
  name: 'MemberManage',
  components: {
    STable,
    Ellipsis
  },
  data () {
    this.columns = columns
    return {
      // BASE
      advanced: false,

      selectedRowKeys: [],
      selectedRows: [],
      queryParam: {},
      loadData: (parameter) => {
        const requestParam = Object.assign(parameter, this.queryParam)
        return memberSearch(requestParam)
        .then(res => {
          console.log(res.result)
          return { data: res.result }
        })
      }
    }
  },
  filters: {
    statusText: function (value) {
      return statusMap[value].text
    },
    statusTypeFilter: value => {
      return statusMap[value].status
    }
  },
  methods: {
    handleAdd () {},
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    }
  }
}
</script>
